<template>
    <div>

        <lab_head  />
        <lab_header  />
        <div class="container layout layout-margin-top">


            <div class="row">
                <div class="col-md-9 layout-body">

            <div class="content">
                <div class="row course-cates">
                    <div class="col-md-1 course-cates-title">类别：</div>

                         <div class="col-md-11 course-cates-content">
                            <a href="">全部</a>
                            <a v-for="(item,index) in category" :key="index" @click="category_change(item)">{{ item }}</a>
                         </div>
                </div>
                <div class="row course-cates">
                    <div class="col-md-1 course-cates-title">标签：</div>
                     <div class="col-md-11 course-cates-content">
                        <a class="" href="">全部</a>
                        <a v-for="(label,index) in labels" :key="index" @click="label_change(label)">{{ label }}</a>
                      </div>
                </div>
            </div>
            <div class="content position-relative">

                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="">全部</a></li>
                    <li class=""><a href="">已上线</a></li>
                    <li class=""><a href="" class="stat-event">即将上线</a></li>

                </ul>
                <div class="clearfix"></div>
                <div class="courses-sort">
                    <a  href="">最新</a>
                    /
                    <a  href="">最热</a>

                </div>

                <div class="search-result"></div>
                <div class="row">
                  <div class="col-md-4 col-sm-6  course" v-for="(course,index) in courselist" :key="index">
                    <a class="course-box" @click="details(course.id,course.title,course.describe,course.guanzhu)">
                      <div class="sign-box">
                          <i class="fa fa-star-o course-follow pull-right"
                              data-follow-url="/courses/63/follow"
                              data-unfollow-url="/courses/63/unfollow"  style="display:none"  ></i>

                      </div>
                      <div class="course-img">

                          <img :src="course.img">

                      </div>

                      <div class="course-body">
                          <span class="course-title" data-toggle="tooltip" data-placement="bottom" :title="course.title">{{ course.title }}</span>
                      </div>
                      <div class="course-footer">
                        <span class="course-per-num pull-left">
                                  <i class="fa fa-users"></i>
                              {{ course.guanzhu }}
                        </span>
                      </div>
                    </a>
                </div>
                <!-- 分页器 -->
                <nav class="pagination-container">
                  <span class="pagination">
                    <Pagination @change="category_change(a)" v-model="pagination"></Pagination>
                  </span>
                </nav>

                </div>

               </div>

                </div>
                <div class="col-md-3 layout-side">

                    <user_info  />
                    <last_paths  />
                    <QR_code  />

                </div>
            </div>
        </div>


        <lab_footer  />


    </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import { get_category,get_label,get_kind,get_tag } from './axios_api/api';
import { config } from '../config';

export default {
    data(){
        return{
          // 保持分类标识
          a : '',
          // 课程分类
          category:[],
          // 课程标签
          labels:[],
          // 全部课程
          courselist : [],
          // 分页器变量
          pagination:{
              // 当前页
              page:1,
              // 每页的数据量
              size:3,
              // 总数据
              total:0,
          },
        }

    },
    components:{
        lab_head,
        lab_header,
        lab_footer,
        user_info,
        last_paths,
        QR_code,
    },
    mounted:function(){

        this.category_get();

        this.label_get();

        this.category_change();


    },

    methods:{
        // 点击事件，获取课程名称跳转到详情页
        details(id,t,d,g){
          // var params  = '?title=' + t + '&describe=' + d + '&guanzhu=' + g
          // this.$router.push('/course/course_show/' + params);

          this.$router.push({path:"/course/course_show/",query:{
            c_id:id,
          }})
        },

        // 点击事件，获取分类对应数据
        category_change(t){
          // console.log(t);
          // 发送请求
          var params = {category:t,page:this.pagination.page,size:this.pagination.size}
          get_kind(params).then((resp)=>{
            this.courselist = resp.data;

            this.pagination.total = resp.total;

            this.a = t;
          })
        },
        // 点击事件，获取标签对应数据
        label_change(t){
          console.log(t);
          // 发送请求
          var params = {label:t,page:this.pagination.page,size:this.pagination.size}
          get_tag(params).then((resp)=>{
            console.log(resp.data);
            this.courselist = resp.data;

            this.pagination.total = resp.total;

            this.a = t;
          })
        },
        // 获取分类
        category_get(){
          get_category().then((resp)=>{
            var mycate = [];
            // 二次处理数据
            for (let i=0;i<resp.length;i++){
              mycate.push(resp[i]['title']);
            };
            // 赋值
            this.category = mycate;
          })
        },
        // 全部标签
        label_get(){
          get_label().then((resp)=>{
            var mycate = [];
            // 二次处理数据
            for (let i=0;i<resp.length;i++){
              mycate.push(resp[i]['title']);
            };
            // 赋值
            this.labels = mycate;
          })
        }

    }
}
</script>

<style>
.pagination{

}

</style>
